<template>
	<view class="orderAgainPayConfirm">
			<view class="address-entrance" >
				<card-com :show-gap="false" >
					<view class="content"  >
						<view class="content-item">
							<view class="content-item-left">
								<image src="/static/images/addressicon.png" class="addressicon" mode=""></image>
								<view class="item" >
									<view class="contacts">
										<view class="name">{{ currentOrder.address.contact_name }}</view>
										<view class="phone">{{ currentOrder.address.contact_phone }}</view>
									</view>
									<view class="address">{{ currentOrder.address.address }}</view>
								</view>
							</view>
							<!-- <image src="/static/images/rightmore.png" class="rightmore" mode=""></image> -->
						</view>
						<view class="note">{{ shipNotice }}</view>
					</view>
					
				</card-com>
			</view>
			<view class="order-products panel">
				<card-com title="购物清单" :show-gap="false">
					<view class="items">
						<view class="product">
							<image class="cover"  :src="currentOrder.items[0].sku.pic_url"></image>
							<view class="desc">
								<view class="desc-part1">
									<!-- <view class="name">{{ currentOrder.items[0].product_title | ellipsis(14) }}</view> -->
									<view class="name" v-if="!currentOrder.items[0].sku.product.is_gold_bean">{{ currentOrder.items[0].product_title | ellipsis(18) }}</view>
									<view class="name" v-if="currentOrder.items[0].sku.product.is_gold_bean">{{ currentOrder.items[0].sku.name | ellipsis(18) }}</view>
									<!-- <view class="name" >{{ currentOrder.items[0].product_title | ellipsis(18)) }}</view> -->
									<!-- <view class="name" v-if="currentOrder.items[0].sku.product.is_gold_bean">{{ currentOrder.items[0].sku.name | ellipsis(18) }}</view> -->
									<!-- <view>￥ {{ currentOrder.total_amount }}</view> -->
								</view>
								<!-- <view class="sku">购买选择：{{ currentOrder.items[0].sku.name }} × {{ currentOrder.items[0].amount }}</view> -->
								<view class="sku" v-if="!currentOrder.items[0].sku.product.is_gold_bean">购买选择：{{ currentOrder.items[0].sku.name }} × {{ currentOrder.items[0].amount }}</view>
								<view class="sku" v-if="currentOrder.items[0].sku.product.is_gold_bean">购买选择：{{ currentOrder.items[0].sku.attr_value[0] }} × {{ currentOrder.items[0].amount }}</view>
								<!-- <view class="price">
									￥ {{ orderCurrentTotalAmount ? orderCurrentTotalAmount : orderTotalAmount }}
								</view> -->
							</view>
						</view>
					</view>
				</card-com>
			</view>
			<view class="price-info">
				<view class="price-info-title">价格明细</view>
				<view class="total-price">
					<view>商品总额</view>
					<view>￥{{ currentOrder.total_amount  }}</view>
				</view>
			</view>
			<payment-choose-com :user="user" @paymentChosen="choosePayment"  :shoppingmoneyShow="currentOrder.items[0].sku.product.is_spend_section" :alipayShow="alipayShow&&!currentOrder.items[0].sku.product.is_gold_bean" :weixinPayShow="!currentOrder.items[0].sku.product.is_gold_bean" ></payment-choose-com>
			<!-- <view class="buy-bottom">
				<view>合计：</view>
				<view class="buy-bottom-money">
					<view>
						<text>￥</text>
						<text>{{ currentOrder.total_amount }}</text>
					</view>
				</view>
				<view class="buy-now" @click="submitOrder">
					<image src="/static/images/buynow.png" mode=""></image>
					<view>立即支付</view>
				</view>
			</view> -->
			
			<view class="buy-bottom">
				<view>合计：</view>
				<view class="buy-bottom-money">
					<view>
						<text>￥</text>
						<text>{{ currentOrder.total_amount }}</text>
					</view>
				</view>
				<view class="buy-now" @click="submitOrder">
					<image src="/static/images/buynow.png" mode=""></image>
					<view>立即支付</view>
				</view>
			</view>
			
	</view>
</template>

<script>
	import PaymentChooseCom from "components/common/PaymentChooseCom"
	import { payOrderByWxmini,payOrderByAdapayWxmini,payOrderByAliwap } from "api/paymentApi"
	import { balancepay,wxpaym,spendpay,goldCoinPay } from "helpers/paymentHelper"
	import store from 'store'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import CurrentUser from "mixins/CurrentUser"
	export default {
		store,
		mixins: [
			CurrentUser
		],
		components: {
			PaymentChooseCom
		},
		computed: {
			...mapGetters([
				'currentAddress',
				'orderPayment',
				'order',
			])
		},
		data: () => ({
			shipNotice: '受疫情影响，部分地区无法及时发货，平台会在疫情解除后第一时间安排发货，敬请谅解！',
			currentOrder:{},
			form: {},
			isWeiXin:true,
			alipayShow:false,
		}),
		methods:{
			...mapActions([
				'updateOrderPayment',
				'getDefaultAddress',
				'updateIsAddressChosenForOrder',
				'createNewOrder'
			]),
			async choosePayment(payment) {
				await this.updateOrderPayment(payment)
			},
			async chooseAddress() {
				await this.updateIsAddressChosenForOrder(true)
				uni.navigateTo({
					url: `/packs/pages/address/index`
				})
			},
			isWeiXinLogin() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					return true;
				} else {
					return false;
				}
			},
			async payCurrentOrder() {
				
				if (this.orderPayment === 'balance') {
					await balancepay(this.order.id, 'order')
					uni.setStorage({
						key: 'payid',
						data: this.order.id
					});
				}
				if (this.orderPayment === 'shoppingmoney') {
					await spendpay(this.order.id, 'order')
					uni.setStorage({
						key: 'payid',
						data: this.order.id
					});
				}
				
				if (this.orderPayment === 'weixin') {
					const payload = await payOrderByAdapayWxmini(this.currentOrder.id)
					let jumpPayUrl = ''
					if(this.isWeiXinLogin){
						jumpPayUrl = payload.result.wx_h5_pay_url;
					}else{
						jumpPayUrl = payload.result.scheme_code;
					}
					window.location.href = jumpPayUrl;
				}
				
				if (this.orderPayment === 'alipay') {
					const payload = await payOrderByAliwap(this.currentOrder.id)
					document.querySelector('body').innerHTML = payload.result;
					await document.forms[0].submit()
					uni.reLaunch({
						url:'/pages/index/index'
					})
					// uni.setStorage({
					// 	key: 'payid',
					// 	data: this.order.id
					// });
					// uni.navigateTo({
					// 	url:'/packs/pages/order/paid'
					// })
				}
				if(this.orderPayment === 'goldcoinsmoney'){
					await goldCoinPay(this.currentOrder.id, 'againorder')
					uni.setStorage({
						key: 'payid',
						data: this.order.id
					});
				}
			},
			async submitOrder() {
			
				if (!this.currentAddress) {
					uni.showToast({
						title: '请选择收货地址'
					})
					return
				}
				let orderItems = []
				orderItems.push({
					sku_id: this.currentOrder.items[0].sku.id,
					amount: this.currentOrder.items[0].amount
				})
			
				this.form.items = orderItems
				this.form.address_id = this.currentAddress.id
				
			
				// await this.createNewOrder(this.form)
				await this.payCurrentOrder()
			}
		},
		async onShow(){
			if(this.isWeiXinLogin()){
				this.isWeiXin = true;
				this.alipayShow = false
			}else{
				this.isWeiXin = false
				this.alipayShow = true
			}
			await this.getDefaultAddress()
		},
		async onLoad(options) {
			this.currentOrder = JSON.parse(decodeURIComponent(options.items))
			if(this.isWeiXinLogin()){
				this.isWeiXin = true;
				this.alipayShow = false
			}else{
				this.isWeiXin = false
				this.alipayShow = true
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		background: #F6F6F6;
	}
	.orderAgainPayConfirm{
		padding: 20rpx;
		padding-bottom: 250rpx;
	}
	.address-entrance {
		.content {
			.item {
				.address {
					width: 550rpx;
					font-size:24rpx;
					font-weight: 400;
					color: #333333;
					margin-top: 5rpx;
				}
				.contacts {
					display: flex;
					align-items: baseline;
					justify-content: flex-start;
					.name {
						font-size:26rpx;
						font-weight: 500;
						color: #333333;
						margin-right: 20rpx;
					}
	
					.phone {
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
	
			.note {
				font-size: 22rpx;
				color: #E6A23C;
				margin-top: 20rpx;
				padding-top: 20rpx;
				border-top: 1px #EEEEEE solid;
			}
		}
	}
	
	.content-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.rightmore {
		display: block;
		width: 32rpx;
		height: 32rpx;
	}
	
	.content-item-left {
		display: flex;
		align-items: center;
	}
	
	.addressicon {
		display: block;
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.order-products {
		.items {
			.product {
				display: flex;
				justify-content: flex-start;
				margin: 16rpx 0 0 4rpx;
	
				.cover {
					display: block;
					width: 144rpx;
					height: 144rpx;
					margin-right: 20rpx;
				}
	
				.desc {
					font-size: 24rpx;
	
					.name {
						width: 460rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
	
					.sku {
						width: 460rpx;
						margin-top: 16rpx;
						color: #999999;
						
					}
	
					.price {
						color: #999999;
					}
				}
			}
		}
	}
	.desc-part1{
		display: flex;
		align-items: center;
		justify-content: space-between;
		>view:nth-child(2){
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			// margin-right: 20rpx;
		}
	}
	.price-info {
		width: 710rpx;
		height: 160rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}
	
	.price-info-title {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333330;
		margin-left: 24rpx;
		padding-top: 24rpx;
	}
	
	.total-price {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		margin-top: 26rpx;
	
		>view:nth-child(1) {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333330;
		}
	
		>view:nth-child(2) {
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333330;
		}
	}
	
	.buy-bottom {
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		display: flex;
		padding-bottom: 70rpx;
		padding-top: 15rpx;
		justify-content:flex-end;
		align-items: center;
		position: fixed;
		bottom: 0;
		left:0;
		>view:nth-child(1) {
			font-size: 24rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 34rpx;
			margin: 20rpx 0 0 0;
		}
	}
	
	.buy-bottom-money {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin: 4rpx 0 0 0;
	
		>view:nth-child(1) {
			display: flex;
			align-items: baseline;
	
			>text:nth-child(1) {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF4924;
			}
	
			>text:nth-child(2) {
				font-size: 48rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FF4924;
				line-height: 66rpx;
			}
		}
	
		>view:nth-child(2) {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}
	
	.buy-now {
		width: 224rpx;
		height: 72rpx;
		border-radius: 36rpx;
		margin:0rpx 20rpx 0 100rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
	
		image {
			display: block;
			width: 224rpx;
			height: 72rpx;
			border-radius: 36rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;
		}
	
		>view {
			position: relative;
			z-index: 1;
		}
	}
	
	
	// .buy-bottom {
	// 	width: 100%;
	// 	height: 100rpx;
	// 	background: #FFFFFF;
	// 	display: flex;
	// 	padding-bottom: 70rpx;
	// 	justify-content: flex-end;
	// 	position: fixed;
	// 	left:0;
	// 	bottom: 0;
	// 	>view:nth-child(1) {
	// 		font-size: 24rpx;
	// 		font-family: PingFangSC-Semibold, PingFang SC;
	// 		font-weight: 600;
	// 		color: #333333;
	// 		line-height: 34rpx;
	// 		margin: 28rpx 0 0 0;
	// 	}
	// }
	
	// .buy-bottom-money {
	// 	display: flex;
	// 	flex-direction: column;
	// 	align-items: flex-end;
	// 	margin: 4rpx 0 0 0;
	
	// 	>view:nth-child(1) {
	// 		display: flex;
	// 		align-items: baseline;
	
	// 		>text:nth-child(1) {
	// 			font-size: 28rpx;
	// 			font-family: PingFangSC-Regular, PingFang SC;
	// 			font-weight: 400;
	// 			color: #FF4924;
	// 		}
	
	// 		>text:nth-child(2) {
	// 			font-size: 48rpx;
	// 			font-family: PingFangSC-Semibold, PingFang SC;
	// 			font-weight: 600;
	// 			color: #FF4924;
	// 			line-height: 66rpx;
	// 		}
	// 	}
	
	// 	>view:nth-child(2) {
	// 		font-size: 24rpx;
	// 		font-family: PingFangSC-Regular, PingFang SC;
	// 		font-weight: 400;
	// 		color: #999999;
	// 	}
	// }
	
	// .buy-now {
	// 	width: 224rpx;
	// 	height: 72rpx;
	// 	border-radius: 36rpx;
	// 	margin: 14rpx 20rpx 0 16rpx;
	// 	position: relative;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	font-size: 32rpx;
	// 	font-family: PingFangSC-Semibold, PingFang SC;
	// 	font-weight: 600;
	// 	color: #333333;
	
	// 	image {
	// 		display: block;
	// 		width: 224rpx;
	// 		height: 72rpx;
	// 		border-radius: 36rpx;
	// 		position: absolute;
	// 		left: 0;
	// 		top: 0;
	// 		z-index: 0;
	// 	}
	
	// 	>view {
	// 		position: relative;
	// 		z-index: 1;
	// 	}
	// }
</style>
